<template>
  <div>
    <div>
      <el-input v-model="params.variety" style="width: 200px ; height: 40px" placeholder="请输入品种"></el-input>
      <el-input v-model="params.age" style="width: 200px ; height: 40px ; margin-left :5px"
                placeholder="请输入年龄"></el-input>
      <el-input v-model="params.address" style="width: 200px ; height: 40px ; margin-left :5px"
                placeholder="请输入地址"></el-input>
      <el-button type="primary" style="margin-left: 8px" @click="getCat()" round>搜索</el-button>
      <el-button type="danger" icon="el-icon-delete" circle @click="clean()"></el-button>
      <el-button type="success" style="margin-left: 370px" @click="add()" round v-if="user.name!=null">发布宠物信息
      </el-button>
    </div>
    <div class="centered-component" v-if="this.catData.length===0">
      <el-empty description="暂无数据">
      </el-empty>
    </div>


    <div>
      <el-row>
        <el-col v-for="(cat, index) in catData" :key="index">
          <el-card shadow="hover">
            <div style="display: flex">
              <div>
                <div class="block">
                  <el-image :src="'http://localhost:8080/yyj/files/'+cat.image"
                            :preview-src-list="['http://localhost:8080/yyj/files/'+cat.image]"
                            style="height: 150px;width: 120px"></el-image>
                </div>
                <div class="bottom clearfix">
                  <span style="font-size: 5px">
                    {{ cat.currentTime }}
                  </span>
                </div>
              </div>
              <div>
                <el-descriptions style="margin-left :20px" title="萌宠信息">
                  <template slot="extra">
                    <el-button type="primary" size="small" @click="() => openAdoptionForm(cat.petId)"
                               v-if="user.userId!=cat.originalOwnerId">领养
                    </el-button>
                    <el-button type="primary" size="small" @click="update(cat)" v-if="user.userId==cat.originalOwnerId">
                      修改
                    </el-button>
                    <el-button type="danger" size="small" @click="del(cat.petId)"
                               v-if="user.userId==cat.originalOwnerId">删除
                    </el-button>
                    <i class="el-icon-price-tag" style="margin-left: 10px"
                       v-if="user.userId==cat.originalOwnerId">我的</i>
                  </template>
                  <el-descriptions-item label="姓名">{{ cat.name }}</el-descriptions-item>
                  <el-descriptions-item label="品种">{{ cat.variety }}</el-descriptions-item>
                  <el-descriptions-item label="年龄">{{ cat.age }}</el-descriptions-item>
                  <el-descriptions-item label="地址">{{ cat.address }}</el-descriptions-item>
                  <el-descriptions-item label="介绍">{{ cat.description }}</el-descriptions-item>
                  <el-descriptions-item label="联系电话">{{ cat.chat }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--对话框    -->
    <template>
      <div>
        <el-dialog title="请填写宠物信息" :visible.sync="dialogFormVisible" width="40%">
          <el-form :model="form">
            <el-form-item label="姓名" width="80%">
              <el-input v-model="form.name" autocomplete="off" style="width: 85%"></el-input>
            </el-form-item>
            <el-form-item label="图片" width="80%">
              <el-upload action="http://localhost:8080/yyj/files/upload" list-type="picture-card" :show-file-list="true"
                         :on-success="successUpload" :on-remove="handleRemove" :limit="1 ">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="物种" width="50%">
              <template>
                <el-radio v-model="form.species" label="猫">猫</el-radio>
                <el-radio v-model="form.species" label="狗">狗</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="品种" width="50%">
              <el-input v-model="form.variety" autocomplete="off" style="width: 85%"></el-input>
            </el-form-item>
            <el-form-item label="年龄" width="50%">
              <el-input v-model="form.age" autocomplete="off" style="width: 85%"></el-input>
            </el-form-item>
            <el-form-item label="电话" width="50%">
              <el-input v-model="form.chat" autocomplete="off" style="width: 85%"></el-input>
            </el-form-item>
            <el-form-item label="地址" width="50%">
              <el-input v-model="form.address" autocomplete="off" style="width: 85%"></el-input>
            </el-form-item>
            <el-form-item label="详述" width="50%">
              <el-input v-model="form.description" autocomplete="off" style="width: 85%"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!--收养宠物的表单    -->
      <div>
        <!-- 领养表单模态框 -->
        <el-dialog :visible="showAdoptionModal" title="领养信息" @close="showAdoptionModal = false" width="30%">
          <el-form ref="adoptionForm" :model="adoptionData" label-width="80px">
            <el-form-item label="联系方式">
              <el-input v-model="adoptionData.contact"></el-input>
            </el-form-item>
            <el-form-item label="约定时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="adoptionData.setTime"
                              value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="约定地点">
              <el-radio v-model="radio" label="1">上门领养</el-radio>
              <el-radio v-model="radio" label="2">自定义地点</el-radio>
            </el-form-item>
            <el-form-item label="具体地点" v-if="showSpotInput">
              <el-input v-model="adoptionData.spot"></el-input>
            </el-form-item>
            <el-form-item label="申请理由">
              <el-input type="textarea" v-model="adoptionData.applyReason"></el-input>
            </el-form-item>
          </el-form>
          <!-- 模态框的底部按钮 -->
          <span slot="footer" class="dialog-footer">
              <el-button type="warning" @click="showAdoptionModal = false">取消</el-button>
              <el-button type="primary" @click="submitAdoptionForm">提交</el-button>
            </span>
        </el-dialog>
      </div>
      <!--确认删除的对话框      -->
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
      >
        <span>你确认要删除已经发布的宠物信息吗</span>
        <span slot="footer" class="dialog-footer">
    <el-button type="warning" @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="delSubmit()">确 定</el-button>
  </span>
      </el-dialog>

    </template>
  </div>


</template>

<script>
import request from "@/utils/request";
import moment from 'moment';

export default {
  name: "CatView",
  data() {
    return {
      Id: '',
      radio: '1',
      showSpotInput: false,
      showAdoptionModal: false,
      dialogVisible: false,
      adoptionData: {},


      params: {
        species: '',
        age: '',
        address: '',
        variety: '',

      },

      apply: {
        name: '',
        region: ''
      },

      catData: [],
      dialogFormVisible: false,
      form: {
        originalOwnerId: ''
      },
      /*如果localStorage中存在"user"项，则将其值解析为一个JavaScript对象；如果不存在，则返回一个空的JavaScript对象{}*/
      user: localStorage.getItem("user") ? (JSON).parse(localStorage.getItem("user")) : {}
    }
  },
  watch: {
    radio(newValue) {
      this.showSpotInput = newValue === '2'; // 当选择自定义地点时显示输入框，否则隐藏
    },
  },


  created() {

    this.getCat();
    this.dogData.forEach((cat) => {
      const formattedTime = moment(cat.currentTime).format('YYYY-MM-DD HH:mm:ss');
      cat.currentTime = formattedTime;
    });
  },
  methods: {
    openAdoptionForm(petId) {
      // 打开模态框
      this.showAdoptionModal = true;
      // 初始化表单数据（如果需要的话）
      this.adoptionData = {};
      this.adoptionData.applyUserId = this.user.userId;
      this.adoptionData.petId = petId;
    },
    submitAdoptionForm() {
      request.post("/audit/add", this.adoptionData).then(res => {
        if (res.code === '0') {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.showAdoptionModal = false;
          this.$router.push('/mine/myAudit');
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    getCat() {
      request.get("/Cat/searchCat", {
        params: this.params
      }).then(res => {
        if (res.code === '0') {
          this.catData = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    add() {
      this.form = {}
      /*设置对话款能看到* 注意this*/
      this.dialogFormVisible = true
    },
    submit() {
      this.form.originalOwnerId = this.user.userId;
      request.post("/Cat", this.form).then(res => {
        if (res.code === '0') {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.getCat();
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    //清空
    clean() {
      this.params = {
        species: '',
        age: '',
        address: '',
        variety: ''
      }
      this.getCat();
    },
    handleRemove(file) {
      console.log(file);
    },
    successUpload(res) {
      console.log(res);
      this.form.image = res.data;
    },
    update(obj) {
      this.form = obj;
      this.dialogFormVisible = true
      this.getCat();
    },
    del(petId) {
      this.dialogVisible = true;
      this.Id = petId;
    },
    //确认删除已经发布的宠物
    delSubmit() {
      request.delete("/Cat/" + this.Id).then(res => {
        if (res.code === '0') {
          this.$message.success("删除成功");
          this.dialogVisible = false;
          this.getCat();
        } else {
          this.$message.error(res.msg);
        }
      })
    }
  }
}
</script>

<style scoped>

</style>